<template>
  <transition name="slide">

    <div class="modal" v-show="showModal">
      <!--遮罩层开始   -->
      <div class="mask"></div>
      <!--遮罩层结束   -->
      <!--弹框开始    -->
      <div class="modal-dialog">
        <div class="modal-header">
          <span>{{ title }}</span>
          <a href="javascript:" class="icon-close" v-show="showClose" @click="$emit('closeModel');"></a>
        </div>
        <div class="modal-body">
          <slot name="body"></slot>
        </div>
        <div class="modal-footer btn-group">
          <a href="javascript:" class="btn" v-if="'1'===btnType || '3'===btnType" @click="$emit('submit')">{{
              sureText
            }}</a>
          <a href="javascript:" class="btn btn-default" v-if="'3'===btnType || '2'===btnType"
             @click="$emit('closeModel');">{{ cancelText }}</a>
        </div>
      </div>
      <!--弹框结束    -->
    </div>
  </transition>
</template>

<script>
export default {
  name: "modal",
  props: {
    //弹窗类型，小small、中middle、大large、表单form
    modalType: {
      type: String,
      default: 'form'
    },
    //弹窗标题
    title: String,
    //按钮类型，1确定按钮 2取消按钮 3确定和取消
    btnType: {
      type: String,
      default: '3'
    },
    sureText: {
      type: String,
      default: '确定'
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    showModal: {
      type: Boolean,
      default: false
    },
    //是否显示遮罩层
    showMask: {
      type: Boolean,
      default: true,
    },
    showClose: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {}
  }
}
</script>

<style scoped lang="scss">
@import "~@/assets/scss/mixin.scss";
@import "~@/assets/scss/config.scss";

.modal {
  @include position(fixed);
  z-index: 10;
  transition: all .5s; /*动画效果*/

  /*进入之后*/
  &.slide-enter-active {
    top: 0;
  }

  /*离开之后*/
  &.slide-leave-active {
    top: -100%;
  }

  /*进入之前（这个必须要放在后边）*/
  &.slide-enter {
    top: -100%
  }

  .mask {
    @include position(fixed);
    background-color: $colorI;
    opacity: 0.5; /*透明度*/
  }

  .modal-dialog {
    @include position(absolute, 40%, 50%, 660px, auto);
    background-color: $colorG;
    transform: translate(-50%, -50%); /*指定位移*/
    .modal-header {
      height: 60px;
      background-color: $colorJ;
      line-height: 60px;
      padding: 0 25px;
      font-size: $fontI;

      .icon-close {
        @include positionBgImg(absolute, 23px, 25px, 16px, 14px, '/imgs/icon-close.png');
        transition: transform .3s; /*动画过度*/

        &:hover {
          transform: scale(1.7); /*放大*/
          transition: transform .3s;
        }
      }
    }

    .modal-body {
      padding: 42px 40px 54px;
      font-size: 15px;
    }

    .modal-footer {
      height: 82px;
      line-height: 82px;
      text-align: center;
      background-color: $colorJ;
    }
  }


}
</style>
